<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>eh documentation</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="icon" type="image/x-icon" href="../images/favicon.ico">
	      <link rel="stylesheet" href="../styles/style.css">
    </head>
    <body>

        <div class="navbar navbar-default navbar-fixed-top visible-xs">
            <a href="../" class="navbar-brand">eh documentation</a>
            <button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
        </div>

        <div class="xs-menu menu" id="mobile-menu">
                <div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search">
</div>
            <compodoc-menu></compodoc-menu>
        </div>

        <div class="container-fluid main">
           <div class="row main">
               <div class="hidden-xs menu">
                   <compodoc-menu mode="normal"></compodoc-menu>
               </div>
               <!-- START CONTENT -->
               <div class="content component">
                   <div class="content-data">




<ol class="breadcrumb">
  <li>Components</li>
  <li>SelectPosComponent</li>
</ol>

<ul class="nav nav-tabs" role="tablist">
        <li class="active">
            <a href="#info" role="tab" id="info-tab" data-toggle="tab" data-link="info">Info</a>
        </li>
        <li >
            <a href="#source" role="tab" id="source-tab" data-toggle="tab" data-link="source">Source</a>
        </li>
        <li >
            <a href="#templateData" role="tab" id="templateData-tab" data-toggle="tab" data-link="template">Template</a>
        </li>
        <li >
            <a href="#tree" role="tab" id="tree-tab" data-toggle="tab" data-link="dom-tree">DOM Tree</a>
        </li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade active in" id="c-info"><p class="comment">
    <h3>File</h3>
</p>
<p class="comment">
    <code>src/app/select-pos/select-pos/select-pos.component.ts</code>
</p>



    <p class="comment">
        <h3>Implements</h3>
    </p>
    <p class="comment">
                <code><a href="https://angular.io/api/core/OnInit" target="_blank" >OnInit</a></code>
                <code><a href="https://angular.io/api/core/OnDestroy" target="_blank" >OnDestroy</a></code>
    </p>


<section>
    <h3>Metadata</h3>
    <table class="table table-sm table-hover">
        <tbody>











            <tr>
                <td class="col-md-3">selector</td>
                <td class="col-md-9"><code>app-select-pos</code></td>
            </tr>

            <tr>
                <td class="col-md-3">styleUrls</td>
                <td class="col-md-9"><code>select-pos.component.scss</code></td>
            </tr>



            <tr>
                <td class="col-md-3">templateUrl</td>
                <td class="col-md-9"><code>./select-pos.component.html</code></td>
            </tr>


        </tbody>
    </table>
</section>

    <section>
    <h3 id="index">Index</h3>
    <table class="table table-sm table-bordered index-table">
        <tbody>
                <tr>
                    <td class="col-md-4">
                        <h6><b>Properties</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                            <li>
                                <a href="#ac">ac</a>
                            </li>
                            <li>
                                <a href="#address">address</a>
                            </li>
                            <li>
                                <a href="#isOkLoading">isOkLoading</a>
                            </li>
                            <li>
                                <a href="#isVisible">isVisible</a>
                            </li>
                            <li>
                                <a href="#map">map</a>
                            </li>
                            <li>
                                <a href="#mapElement">mapElement</a>
                            </li>
                            <li>
                                <a href="#onConfirm">onConfirm</a>
                            </li>
                            <li>
                                <a href="#onHightLight">onHightLight</a>
                            </li>
                            <li>
                                <a href="#onOpen">onOpen</a>
                            </li>
                            <li>
                                <a href="#resultElement">resultElement</a>
                            </li>
                            <li>
                                <a href="#suggestElement">suggestElement</a>
                            </li>
                        </ul>
                    </td>
                </tr>

                <tr>
                    <td class="col-md-4">
                        <h6><b>Methods</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                            <li>
                                <a href="#addListen">addListen</a>
                            </li>
                            <li>
                                <a href="#initData">initData</a>
                            </li>
                            <li>
                                <a href="#initMap">initMap</a>
                            </li>
                            <li>
                                <a href="#ngOnDestroy">ngOnDestroy</a>
                            </li>
                            <li>
                                    <span class="modifier">Async</span>
                                <a href="#ngOnInit">ngOnInit</a>
                            </li>
                            <li>
                                <a href="#off">off</a>
                            </li>
                            <li>
                                <a href="#on">on</a>
                            </li>
                            <li>
                                <a href="#onCancel">onCancel</a>
                            </li>
                            <li>
                                <a href="#onOk">onOk</a>
                            </li>
                            <li>
                                <a href="#savePlace">savePlace</a>
                            </li>
                            <li>
                                <a href="#showModal">showModal</a>
                            </li>
                        </ul>
                    </td>
                </tr>

                <tr>
                    <td class="col-md-4">
                        <h6><b>Inputs</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                            <li>
                                <a href="#onPlace">onPlace</a>
                            </li>
                        </ul>
                    </td>
                </tr>

                <tr>
                    <td class="col-md-4">
                        <h6><b>Outputs</b></h6>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <ul class="index-list">
                            <li>
                                <a href="#onChange">onChange</a>
                            </li>
                        </ul>
                    </td>
                </tr>



        </tbody>
    </table>
</section>

    <section>
    <h3 id="constructor">Constructor</h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
<code>constructor(el: <a href="https://angular.io/api/core/ElementRef" target="_blank">ElementRef</a>)</code>
                    </td>
                </tr>
                        <tr>
                            <td class="col-md-4">
                                <div class="io-line">Defined in <a href="" data-line="69" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:69</a></div>
                            </td>
                        </tr>

                <tr>
                    <td class="col-md-4">
                            <div>
                                    <b>Parameters :</b>
                                    <table class="params">
                                        <thead>
                                            <tr>
                                                <td>Name</td>
                                                    <td>Type</td>
                                                <td>Optional</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                                <tr>
                                                        <td>el</td>
                                                  
                                                        <td>
                                                                    <code><a href="https://angular.io/api/core/ElementRef" target="_blank" >ElementRef</a></code>
                                                        </td>
                                                  
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                </tr>
                                        </tbody>
                                    </table>
                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
</section>

    <section>
    <h3 id="inputs">Inputs</h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-2">
                        <a name="onPlace"></a>
                        <code>onPlace</code>
                    </td>
                    <td class="col-md-10">
                            <p>
                            <em>Type :</em>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>

                            </p>
                        <p>
                            <em>Default value : </em><code>{
    pos: [],
    zoom: &#x27;&#x27;,
    address: &#x27;&#x27;,
  }</code>
                        </p>
                    </td>
                </tr>
                        <tr>
                            <td class="col-md-2" colspan="2">
                                    <div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:23</a></div>
                            </td>
                        </tr>
            </tbody>
        </table>
</section>
    <section>
    <h3 id="outputs">Outputs</h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-2">
                        <a name="onChange"></a>
                        <code>onChange</code>
                    </td>
                    <td class="col-md-10">
                        <em><code>$event</code> Type:</em>    <code>EventEmitter&lt;any&gt;</code>

                    </td>
                </tr>
                        <tr>
                            <td class="col-md-2" colspan="2">
                                    <div class="io-line">Defined in <a href="" data-line="20" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:20</a></div>
                            </td>
                        </tr>
            </tbody>
        </table>
</section>


    <section>
    
        <h3 id="methods">
            Methods
        </h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="addListen"></a>
                        <span class="name">
                            <b>
                            addListen
                            </b>
                            <a href="#addListen"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>addListen()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="145" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:145</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="initData"></a>
                        <span class="name">
                            <b>
                            initData
                            </b>
                            <a href="#initData"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>initData()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="51" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:51</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="initMap"></a>
                        <span class="name">
                            <b>
                            initMap
                            </b>
                            <a href="#initMap"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>initMap()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="82" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:82</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="ngOnDestroy"></a>
                        <span class="name">
                            <b>
                            ngOnDestroy
                            </b>
                            <a href="#ngOnDestroy"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>ngOnDestroy()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="77" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:77</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="ngOnInit"></a>
                        <span class="name">
                            <b>
                                <span class="modifier">Async</span>
                            ngOnInit
                            </b>
                            <a href="#ngOnInit"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                            <span class="modifier-icon icon ion-ios-reset"></span>
                        <code>ngOnInit()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="73" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:73</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="off"></a>
                        <span class="name">
                            <b>
                            off
                            </b>
                            <a href="#off"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>off(el: , type: , fn: , opts: <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">any</a>)</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="102" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:102</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                    <b>Parameters :</b>
                                    <table class="params">
                                        <thead>
                                            <tr>
                                                <td>Name</td>
                                                    <td>Type</td>
                                                <td>Optional</td>
                                                    <td>Default value</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                                <tr>
                                                        <td>el</td>
                                                        <td>
                                                        </td>
                                                    
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                        <td>
                                                        </td>

                                                </tr>
                                                <tr>
                                                        <td>type</td>
                                                        <td>
                                                        </td>
                                                    
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                        <td>
                                                        </td>

                                                </tr>
                                                <tr>
                                                        <td>fn</td>
                                                        <td>
                                                        </td>
                                                    
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                        <td>
                                                        </td>

                                                </tr>
                                                <tr>
                                                        <td>opts</td>
                                                        <td>
                                                                    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
                                                        </td>
                                                    
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                        <td>
                                                                <code>{}</code>
                                                        </td>

                                                </tr>
                                        </tbody>
                                    </table>
                            </div>
                            <div>
                            </div>
                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                                <div class="io-description">
                                    
                                </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="on"></a>
                        <span class="name">
                            <b>
                            on
                            </b>
                            <a href="#on"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>on(el: , type: , fn: , opts: <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">any</a>)</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="98" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:98</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                    <b>Parameters :</b>
                                    <table class="params">
                                        <thead>
                                            <tr>
                                                <td>Name</td>
                                                    <td>Type</td>
                                                <td>Optional</td>
                                                    <td>Default value</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                                <tr>
                                                        <td>el</td>
                                                        <td>
                                                        </td>
                                                    
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                        <td>
                                                        </td>

                                                </tr>
                                                <tr>
                                                        <td>type</td>
                                                        <td>
                                                        </td>
                                                    
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                        <td>
                                                        </td>

                                                </tr>
                                                <tr>
                                                        <td>fn</td>
                                                        <td>
                                                        </td>
                                                    
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                        <td>
                                                        </td>

                                                </tr>
                                                <tr>
                                                        <td>opts</td>
                                                        <td>
                                                                    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
                                                        </td>
                                                    
                                                    <td>
                                                            No
                                                    </td>
                                                    
                                                        <td>
                                                                <code>{}</code>
                                                        </td>

                                                </tr>
                                        </tbody>
                                    </table>
                            </div>
                            <div>
                            </div>
                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                                <div class="io-description">
                                    
                                </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="onCancel"></a>
                        <span class="name">
                            <b>
                            onCancel
                            </b>
                            <a href="#onCancel"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>onCancel()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="67" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:67</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="onOk"></a>
                        <span class="name">
                            <b>
                            onOk
                            </b>
                            <a href="#onOk"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>onOk()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="58" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:58</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="savePlace"></a>
                        <span class="name">
                            <b>
                            savePlace
                            </b>
                            <a href="#savePlace"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>savePlace()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="150" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:150</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="showModal"></a>
                        <span class="name">
                            <b>
                            showModal
                            </b>
                            <a href="#showModal"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
<code>showModal()</code>
                    </td>
                </tr>


                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="41" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:41</a></div>
                            </td>
                        </tr>


                <tr>
                    <td class="col-md-4">

                            <div class="io-description">
                                <b>Returns : </b>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>

                            </div>
                    </td>
                </tr>
            </tbody>
        </table>
</section>

    <section>
    
        <h3 id="inputs">
            Properties
        </h3>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="ac"></a>
                        <span class="name">
                            <b>
                            ac
                            </b>
                            <a href="#ac"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>ac:     <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>

                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="15" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:15</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="address"></a>
                        <span class="name">
                            <b>
                            address
                            </b>
                            <a href="#address"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>address:     <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>

                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="17" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:17</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="isOkLoading"></a>
                        <span class="name">
                            <b>
                            isOkLoading
                            </b>
                            <a href="#isOkLoading"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>isOkLoading:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>false</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="39" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:39</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="isVisible"></a>
                        <span class="name">
                            <b>
                            isVisible
                            </b>
                            <a href="#isVisible"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>isVisible:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>false</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="38" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:38</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="map"></a>
                        <span class="name">
                            <b>
                            map
                            </b>
                            <a href="#map"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>map:     <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>

                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="13" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:13</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="mapElement"></a>
                        <span class="name">
                            <b>
                            mapElement
                            </b>
                            <a href="#mapElement"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>mapElement:     <code><a href="https://angular.io/api/core/ElementRef" target="_blank" >ElementRef</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="https://angular.io/api/core/ElementRef" target="_blank" >ElementRef</a></code>

                        </td>
                    </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Decorators : </i><code>ViewChild</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:30</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="onConfirm"></a>
                        <span class="name">
                            <b>
                            onConfirm
                            </b>
                            <a href="#onConfirm"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>onConfirm:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>(e: any) &#x3D;&gt; {
    //鼠标点击下拉列表后的事件
    let _value &#x3D; e.item.value;
    this.address &#x3D; _value.province + _value.city + _value.district + _value.street + _value.business;
    this.resultElement.nativeElement.innerHTML &#x3D; &#x27;onconfirm&lt;br /&gt;index &#x3D; &#x27; + e.item.index + &#x27;&lt;br /&gt;address &#x3D; &#x27; + this.address;

    this.savePlace();
  }</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="136" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:136</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="onHightLight"></a>
                        <span class="name">
                            <b>
                            onHightLight
                            </b>
                            <a href="#onHightLight"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>onHightLight:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>(e: any) &#x3D;&gt; {
    //鼠标放在下拉列表上的事件
    let str &#x3D; &#x27;&#x27;;
    let _value &#x3D; e.fromitem.value;
    let value &#x3D; &#x27;&#x27;;
    if (e.fromitem.index &gt; -1) {
      value &#x3D; _value.province + _value.city + _value.district + _value.street + _value.business;
    }
    str &#x3D; &#x27;FromItem&lt;br /&gt;index &#x3D; &#x27; + e.fromitem.index + &#x27;&lt;br /&gt;value &#x3D; &#x27; + value;

    value &#x3D; &#x27;&#x27;;
    if (e.toitem.index &gt; -1) {
      _value &#x3D; e.toitem.value;
      value &#x3D; _value.province + _value.city + _value.district + _value.street + _value.business;
    }
    str +&#x3D; &#x27;&lt;br /&gt;ToItem&lt;br /&gt;index &#x3D; &#x27; + e.toitem.index + &#x27;&lt;br /&gt;value &#x3D; &#x27; + value;
    this.resultElement.nativeElement.innerHTML &#x3D; str;
  }</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="117" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:117</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="onOpen"></a>
                        <span class="name">
                            <b>
                            onOpen
                            </b>
                            <a href="#onOpen"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>onOpen:     <code></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Default value : </i><code>() &#x3D;&gt; {
    this.initMap();
    this.initData();
  }</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="45" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:45</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="resultElement"></a>
                        <span class="name">
                            <b>
                            resultElement
                            </b>
                            <a href="#resultElement"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>resultElement:     <code><a href="https://angular.io/api/core/ElementRef" target="_blank" >ElementRef</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="https://angular.io/api/core/ElementRef" target="_blank" >ElementRef</a></code>

                        </td>
                    </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Decorators : </i><code>ViewChild</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="36" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:36</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
        <table class="table table-sm table-bordered">
            <tbody>
                <tr>
                    <td class="col-md-4">
                        <a name="suggestElement"></a>
                        <span class="name">
                            <b>
                            suggestElement
                            </b>
                            <a href="#suggestElement"><span class="icon ion-ios-link"></span></a>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td class="col-md-4">
                        <code>suggestElement:     <code><a href="https://angular.io/api/core/ElementRef" target="_blank" >ElementRef</a></code>
</code>
                    </td>
                </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Type : </i>    <code><a href="https://angular.io/api/core/ElementRef" target="_blank" >ElementRef</a></code>

                        </td>
                    </tr>
                    <tr>
                        <td class="col-md-4">
                            <i>Decorators : </i><code>ViewChild</code>
                        </td>
                    </tr>
                        <tr>
                            <td class="col-md-4">
                                    <div class="io-line">Defined in <a href="" data-line="33" class="link-to-prism">src/app/select-pos/select-pos/select-pos.component.ts:33</a></div>
                            </td>
                        </tr>


            </tbody>
        </table>
</section>

</div>


    <div class="tab-pane fade  tab-source-code" id="c-source">
        <pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { Component, OnInit, ElementRef, ViewChild, Directive, OnDestroy, EventEmitter, Output, Input } from &#x27;@angular/core&#x27;;

import _ from &#x27;lodash&#x27;;

declare var BMap;

@Component({
  selector: &#x27;app-select-pos&#x27;,
  templateUrl: &#x27;./select-pos.component.html&#x27;,
  styleUrls: [&#x27;./select-pos.component.scss&#x27;],
})
export class SelectPosComponent implements OnInit, OnDestroy {
  map: any;

  ac: any;

  address: string;

  @Output()
  onChange: EventEmitter&lt;any&gt; &#x3D; new EventEmitter();

  @Input()
  onPlace: any &#x3D; {
    pos: [],
    zoom: &#x27;&#x27;,
    address: &#x27;&#x27;,
  };

  @ViewChild(&#x27;lmap&#x27;)
  mapElement: ElementRef;

  @ViewChild(&#x27;suggest&#x27;)
  suggestElement: ElementRef;

  @ViewChild(&#x27;result&#x27;)
  resultElement: ElementRef;

  isVisible &#x3D; false;
  isOkLoading &#x3D; false;

  showModal(): void {
    this.isVisible &#x3D; true;
  }

  onOpen &#x3D; () &#x3D;&gt; {
    this.initMap();
    this.initData();
  };

  //回显数据
  initData() {
    console.log(this);
    // this.suggestElement.nativeElement.value &#x3D; this.onPlace.address;
    // this.address &#x3D; this.onPlace.address;
    // this.savePlace();
  }

  onOk(): void {
    this.isOkLoading &#x3D; true;
    const timer &#x3D; setTimeout(() &#x3D;&gt; {
      this.isVisible &#x3D; false;
      this.isOkLoading &#x3D; false;
      clearTimeout(timer);
    }, 100);
  }

  onCancel(): void {
    this.isVisible &#x3D; false;
  }

  constructor(private el: ElementRef) {}

  async ngOnInit() {
    console.log(444444, this.onPlace);
  }

  ngOnDestroy() {
    this.off(this.ac, &#x27;onhighlight&#x27;, this.onHightLight);
    this.off(this.ac, &#x27;onconfirm&#x27;, this.onConfirm);
  }

  initMap() {
    this.map &#x3D; null;
    this.ac &#x3D; null;
    this.map &#x3D; new BMap.Map(this.mapElement.nativeElement);
    this.map.centerAndZoom(this.onPlace.address || &#x27;北京&#x27;, this.onPlace.zoom || 12);
    // 初始化地图,设置城市和地图级别。
    this.ac &#x3D; new BMap.Autocomplete({ input: this.suggestElement.nativeElement, location: this.map }); //建立一个自动完成的对象
    const timer &#x3D; setTimeout(() &#x3D;&gt; {
      if (this.onPlace.address) {
        this.suggestElement.nativeElement.value &#x3D; this.onPlace.address;
      }
      clearTimeout(timer);
    }, 0);
    this.addListen();
  }

  on(el, type, fn, opts: any &#x3D; {}) {
    el &amp;&amp; el.addEventListener(type, fn, opts);
  }

  off(el, type, fn, opts: any &#x3D; {}) {
    el &amp;&amp; el.removeEventListener(type, fn, opts);
  }

  // loadScript(url) {
  //   const script &#x3D; document.createElement(&#x27;script&#x27;);
  //   script.setAttribute(&#x27;src&#x27;, url);
  //   window.document.body.appendChild(script);
  //   return new Promise(resolve &#x3D;&gt; {
  //     script.onload &#x3D; function() {
  //       resolve();
  //     };
  //   });
  // }

  onHightLight &#x3D; (e: any) &#x3D;&gt; {
    //鼠标放在下拉列表上的事件
    let str &#x3D; &#x27;&#x27;;
    let _value &#x3D; e.fromitem.value;
    let value &#x3D; &#x27;&#x27;;
    if (e.fromitem.index &gt; -1) {
      value &#x3D; _value.province + _value.city + _value.district + _value.street + _value.business;
    }
    str &#x3D; &#x27;FromItem&lt;br /&gt;index &#x3D; &#x27; + e.fromitem.index + &#x27;&lt;br /&gt;value &#x3D; &#x27; + value;

    value &#x3D; &#x27;&#x27;;
    if (e.toitem.index &gt; -1) {
      _value &#x3D; e.toitem.value;
      value &#x3D; _value.province + _value.city + _value.district + _value.street + _value.business;
    }
    str +&#x3D; &#x27;&lt;br /&gt;ToItem&lt;br /&gt;index &#x3D; &#x27; + e.toitem.index + &#x27;&lt;br /&gt;value &#x3D; &#x27; + value;
    this.resultElement.nativeElement.innerHTML &#x3D; str;
  };

  onConfirm &#x3D; (e: any) &#x3D;&gt; {
    //鼠标点击下拉列表后的事件
    let _value &#x3D; e.item.value;
    this.address &#x3D; _value.province + _value.city + _value.district + _value.street + _value.business;
    this.resultElement.nativeElement.innerHTML &#x3D; &#x27;onconfirm&lt;br /&gt;index &#x3D; &#x27; + e.item.index + &#x27;&lt;br /&gt;address &#x3D; &#x27; + this.address;

    this.savePlace();
  };

  addListen() {
    this.on(this.ac, &#x27;onhighlight&#x27;, this.onHightLight);
    this.on(this.ac, &#x27;onconfirm&#x27;, this.onConfirm);
  }

  savePlace() {
    this.map.clearOverlays(); //清除地图上所有覆盖物
    const local &#x3D; new BMap.LocalSearch(this.map, {
      //智能搜索
      onSearchComplete: () &#x3D;&gt; {
        const pp &#x3D; local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
        this.onPlace &#x3D; {
          pos: pp,
          zoom: 18,
          address: this.address,
        };
        this.onChange.emit(_.merge({}, this.onPlace));
        this.map.centerAndZoom(pp, this.onPlace.zoom);
        this.map.addOverlay(new BMap.Marker(pp)); //添加标注
      },
    });
    local.search(this.address);
  }
}
</code></pre>
    </div>

    <div class="tab-pane fade " id="c-templateData">
        <pre class="line-numbers"><code class="language-html">&lt;input (click)&#x3D;&quot;showModal()&quot; [(ngModel)]&#x3D;&quot;onPlace.address&quot; [placeholder]&#x3D;&quot;onPlace ? &#x27;点击查看&#x27;:&#x27;请选择&#x27;&quot; nz-input type&#x3D;&quot;text&quot; size&#x3D;&quot;20&quot;
  readonly&#x3D;&quot;readonly&quot; /&gt;
&lt;nz-modal (nzAfterOpen)&#x3D;&quot;onOpen()&quot; [nzBodyStyle]&#x3D;&quot;{&#x27;height&#x27;:&#x27;500px&#x27;}&quot; [(nzVisible)]&#x3D;&quot;isVisible&quot; nzTitle&#x3D;&quot;地图搜索&quot; (nzOnCancel)&#x3D;&quot;onCancel()&quot;
  (nzOnOk)&#x3D;&quot;onOk()&quot; [nzOkLoading]&#x3D;&quot;isOkLoading&quot;&gt;
  &lt;div class&#x3D;&quot;panel-app&quot;&gt;
    &lt;div class&#x3D;&quot;hd&quot;&gt;
      &lt;div id&#x3D;&quot;r-result&quot;&gt;&lt;input placeholder&#x3D;&quot;请输入地址&quot; nz-input #suggest type&#x3D;&quot;text&quot; id&#x3D;&quot;suggestId&quot; size&#x3D;&quot;20&quot; value&#x3D;&quot;百度&quot; /&gt;&lt;/div&gt;
      &lt;div id&#x3D;&quot;searchResultPanel&quot; #result style&#x3D;&quot;border:1px solid #C0C0C0;width:150px;height:auto; display:none;&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class&#x3D;&quot;bd&quot;&gt;
      &lt;div id&#x3D;&quot;l-map&quot; #lmap&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nz-modal&gt;</code></pre>
    </div>

    <div class="tab-pane fade " id="c-tree">
        <div id="tree-container"></div>
        <div class="tree-legend">
            <div class="title">
                <b>Legend</b>
            </div>
            <div>
                <div class="color htmlelement"></div><span>Html element</span>
            </div>
            <div>
                <div class="color component"></div><span>Component</span>
            </div>
            <div>
                <div class="color directive"></div><span>Html element with directive</span>
            </div>
        </div>
    </div>

    
</div>

<script src="../js/libs/vis.min.js"></script>
<script src="../js/libs/htmlparser.js"></script>
<script src="../js/libs/deep-iterator.js"></script>
<script>
        var COMPONENT_TEMPLATE = '<div><input (click)="showModal()" [(ngModel)]="onPlace.address" [placeholder]="onPlace ? \'点击查看\':\'请选择\'" nz-input type="text" size="20"  readonly="readonly" /><nz-modal (nzAfterOpen)="onOpen()" [nzBodyStyle]="{\'height\':\'500px\'}" [(nzVisible)]="isVisible" nzTitle="地图搜索" (nzOnCancel)="onCancel()"  (nzOnOk)="onOk()" [nzOkLoading]="isOkLoading">  <div class="panel-app">    <div class="hd">      <div id="r-result"><input placeholder="请输入地址" nz-input #suggest type="text" id="suggestId" size="20" value="百度" /></div>      <div id="searchResultPanel" #result style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>    </div>    <div class="bd">      <div id="l-map" #lmap></div>    </div>  </div></nz-modal></div>'
    var COMPONENTS = [{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'BComponent', 'selector': 'app-b'},{'name': 'CComponent', 'selector': 'app-c'},{'name': 'ChangeEmailComponent', 'selector': 'app-change-email'},{'name': 'ChangePasswordComponent', 'selector': 'app-change-password'},{'name': 'ChangePhoneComponent', 'selector': 'app-change-phone'},{'name': 'EnrollComponent', 'selector': 'app-enroll'},{'name': 'FileComponent', 'selector': 'app-file'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'GoodComponent', 'selector': 'app-good'},{'name': 'HeaderComponent', 'selector': 'app-header'},{'name': 'HomeComponent', 'selector': 'app-home'},{'name': 'LineComponent', 'selector': 'app-line'},{'name': 'LoginComponent', 'selector': 'app-login'},{'name': 'MyComponent', 'selector': 'app-my'},{'name': 'MyComponent', 'selector': 'app-my'},{'name': 'SelectAreaComponent', 'selector': 'app-select-area'},{'name': 'SelectAreaRangeComponent', 'selector': 'app-select-area-range'},{'name': 'SelectGoodTypeComponent', 'selector': 'app-select-good-type'},{'name': 'SelectPosComponent', 'selector': 'app-select-pos'},{'name': 'SideComponent', 'selector': 'app-side'},{'name': 'UserHeaderComponent', 'selector': 'app-user-header'},{'name': 'XlsxComponent', 'selector': 'app-xlsx'}];
    var DIRECTIVES = [{'name': 'CodeDirective', 'selector': '[appCode]'}];
    var ACTUAL_COMPONENT = {'name': 'SelectPosComponent'};
</script>
<script src="../js/tree.js"></script>














                   </div><div class="search-results">
    <div class="has-results">
        <h1 class="search-results-title"><span class='search-results-count'></span> result-matching "<span class='search-query'></span>"</h1>
        <ul class="search-results-list"></ul>
    </div>
    <div class="no-results">
        <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
    </div>
</div>
</div>
               <!-- END CONTENT -->
           </div>
       </div>

       <script>
            var COMPODOC_CURRENT_PAGE_DEPTH = 1;
            var COMPODOC_CURRENT_PAGE_CONTEXT = 'component';
            var COMPODOC_CURRENT_PAGE_URL = 'SelectPosComponent.html';
       </script>

       <script src="../js/libs/custom-elements.min.js"></script>
       <script src="../js/libs/lit-html.js"></script>
       <script src="../js/menu-wc.js"></script>

       <script src="../js/libs/bootstrap-native.js"></script>

       <script src="../js/libs/es6-shim.min.js"></script>
       <script src="../js/libs/EventDispatcher.js"></script>
       <script src="../js/libs/promise.min.js"></script>
       <script src="../js/libs/zepto.min.js"></script>

       <script src="../js/compodoc.js"></script>

       <script src="../js/tabs.js"></script>
       <script src="../js/menu.js"></script>
       <script src="../js/libs/clipboard.min.js"></script>
       <script src="../js/libs/prism.js"></script>
       <script src="../js/sourceCode.js"></script>
          <script src="../js/search/search.js"></script>
          <script src="../js/search/lunr.min.js"></script>
          <script src="../js/search/search-lunr.js"></script>
          <script src="../js/search/search_index.js"></script>
       <script src="../js/lazy-load-graphs.js"></script>


    </body>
</html>
